<template>
  <div class="app-container">
    <!--表单查询-->
    <!--:inline="true"代表在一行显示-->
    <el-form :inline="true"
             :model="recommendQuery"
             ref="recommendQuery"
             :rules="queryRules"
             v-if="advanced"
             class="demo-form-inline">
      <el-row>
        <el-col :span="6">
          <el-form-item label="推荐人姓名" prop="nickName" label-width="90px">
            <el-input v-model="recommendQuery.nickname" placeholder="推荐人姓名"></el-input>
          </el-form-item>
          <el-form-item label="推荐人电话" prop="phone" label-width="90px">
            <el-input v-model="recommendQuery.phone" placeholder="推荐人电话" ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="被推荐人姓名" prop="referralMobile">
            <el-input v-model="recommendQuery.referralName" placeholder="被推荐人姓名" label-width="100px"></el-input>
          </el-form-item>
          <el-form-item label="被推荐人电话" prop="referralMobile">
            <el-input v-model="recommendQuery.referralMobile" placeholder="被推荐人电话" label-width="100px"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="推荐人性别" prop="referralSex" label-width="100px" >
            <el-select v-model="recommendQuery.sex" placeholder="推荐人性别" >
              <el-option label="男" value="0"></el-option>
              <el-option label="女" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="被推荐人性别" prop="referralSex" label-width="100px">
            <el-select v-model="recommendQuery.referralSex" placeholder="被推荐人性别">
              <el-option label="男" value="0"></el-option>
              <el-option label="女" value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="推荐时间" prop="activityTime" label-width="80px">
            <el-date-picker v-model="recommendQuery.recomDate"
                            type="datetime"
                            placeholder="推荐日期"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            default-time="00:00:00"
            ></el-date-picker>
          </el-form-item>

          <el-form-item label="推荐详情" prop="recomDetail" label-width="80px">
            <el-input v-model="recommendQuery.recomDetail" placeholder="推荐详情"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>

    <!-- 操作 -->
    <div>
       <span class="table-page-search-submitButtons">

          <span class="submitButtons-left">
<!--            <el-button size="small" type="success" @click="addAct" icon="el-icon-plus" plain>新增</el-button>-->
            <el-button size="small" @click="handleDownload" icon="el-icon-download">导出</el-button>
          </span>

          <span class="submitButtons-right">
            <el-button size="small" type="primary" @click="submitQuery" icon="el-icon-search" plain>查询</el-button>
            <el-button size="small" @click="resetQuery" icon="el-icon-refresh">重置</el-button>
            <a @click="toggleAdvanced" style="margin-left: 8px; color: #00BFFF; font-size: 14px">
              {{ advanced ? '收起' : '展开' }}
              <i :class="advanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" />
            </a>
          </span>

       </span>
    </div>

    <!-- 表格 -->
    <el-table
      v-loading="isLoading"
      :data="recommendList"
      element-loading-text="数据加载中"
      border
      fit
      highlight-current-row
      @selection-change="handleSelectionChange"
      ref="multipleRecommendTable"
    >
      <el-table-column type="selection" width="44" align="center"></el-table-column><!--选择一行-->
      <el-table-column prop="nickname" label="推荐人姓名" width="110" align="center"></el-table-column>

      <el-table-column prop="phone" label="电话号码" width="160" align="center"></el-table-column>

      <el-table-column prop="referralName" label="新人姓名" width="110" align="center"></el-table-column>

      <el-table-column prop="referralMobile" label="新人联系电话" align="center"></el-table-column>

      <el-table-column prop="recomDetail" label="推荐详情" align="center" :show-overflow-tooltip="true  "></el-table-column>

      <el-table-column label="时间" align="center" prop="recomDate"></el-table-column>
      <el-table-column label="审核状态" prop="hasCheck" align="center">
        <template slot-scope="scope">
          {{ scope.row.hasChecked == 0 ? "未审核" : "审核通过"}}
        </template>
      </el-table-column>

      <el-table-column label="操作" width="300" align="center">

        <template slot-scope="scope">
          <el-button type="primary" @click="updateRecommend(scope.row)" size="mini" icon="el-icon-edit" round plain>修改</el-button>
          <el-button v-if="scope.row.hasChecked == 0" type="success" size="mini" icon="el-icon-key"
                     @click="checkedById(scope.row)" round plain>审核通过
          </el-button>
          <el-button v-else type="warning" size="mini" icon="el-icon-key"
                     @click="checkedById(scope.row)" round plain>退回审核
          </el-button>
          <el-button type="danger" size="mini" icon="el-icon-delete"
                     @click="removeRecommendById(scope.row)" round plain>删除
          </el-button>

        </template>
      </el-table-column>

    </el-table>

    <!--@current-change="getTeacherListPage" 每次切换上一页、下一页都会调用getTeacherListPage-->
    <!-- 分页 -->
    <el-pagination
      background
      :current-page="queryParams.currentPage"
      :page-size="queryParams.limit"
      :total="total"
      style="padding: 60px 0; text-align: center;"
      layout="total,prev, pager, next, jumper"
      @current-change="getRecommendListPage"
    />

    <!--推荐信息修改-->
    <el-dialog :title="title" @close="updateRecommendCancel" :visible.sync="updateVisible" width="800px" append-to-body>
      <el-form :model="updateForm" ref="updateForm" label-width="120px" :rules="updateActRules" >

        <el-form-item label="推荐人姓名" prop="nickname" width="100px" label-width="100px">
          <el-input @click.native="selectPublishAct" placeholder="请输入" v-model="updateForm.nickname" style="cursor: hand"/>
        </el-form-item>
        <el-form-item label="推荐人电话" prop="phone" label-width="100px">
          <el-input v-model="updateForm.phone" placeholder="请输入推荐人电话" style="cursor: hand"/>
        </el-form-item>
        <el-form-item label="推荐人性别" prop="sex" label-width="100px">
          <el-select v-model="updateForm.sex" placeholder="被推荐人性别">
            <el-option label="男" value="0"></el-option>
            <el-option label="女" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="被推荐人姓名" prop="referralName" label-width="100px">
          <el-input v-model="updateForm.referralName" placeholder="请输入推荐人姓名" />
        </el-form-item>
        <el-form-item label="被推荐人电话" prop="referralMobile" label-width="100px">
          <el-input v-model="updateForm.referralMobile" placeholder="请输入被推荐人电话" />
        </el-form-item>
        <el-form-item label="被推荐人性别" prop="referralSex" label-width="100px">
          <el-select v-model="updateForm.referralSex" placeholder="被推荐人性别">
            <el-option label="男" value="0"></el-option>
            <el-option label="女" value="1"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="推荐详情" prop="recomDetail" label-width="100px">
          <el-input v-model="updateForm.recomDetail" placeholder="请输入推荐详情" />
        </el-form-item>

        <el-form-item label="推荐时间" prop="recomDate" label-width="100px">
          <el-date-picker v-model="updateForm.recomDate"
                          type="datetime"
                          placeholder="推荐时间"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          default-time="00:00:00"
                          style="width: 100%"
                          width="100px"

          ></el-date-picker>
        </el-form-item>
<!--   推荐时间是否可更改       disabled="editPublishAct"-->
        <el-form-item label="推荐状态" prop="hasChecked" label-width="100px">
          <el-radio-group v-model="updateForm.hasChecked">
            <el-radio-button label="未审核" ></el-radio-button>
            <el-radio-button label="已审核" ></el-radio-button>
          </el-radio-group>
        </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitAddRecommend">修改</el-button>
        <el-button @click="updateRecommendCancel">取 消</el-button>
      </div>

    </el-dialog>
  </div>
</template>

<script>
  import recommend from "@/api/recommend/recommend.js"
  import actPublish from "@/api/act/actPublish.js"
  import userCard from '@/api/userCard/userCard'
  export default
  {
    name:"recommendList",
    data()
    {
      return {
        isLoading:true, //是否正在加载
        //新增栏是否打开
        addVisible: false,
        // 高级搜索 展开/关闭
        advanced: false,
        //活动报名查询参数
        recommendQuery:
          {
            hasChecked: "",
            nickname: "",
            phone: "",
            recomDate: "",
            recomDetail: "",
            referralMobile: "",
            referralName: "",
            referralSex: "",
            sex: "",
          },
        queryParams: //分页查询参数
          {
            currentPage:1,
            limit:4,
          },
        recommendList:[],//从后端获取到的推荐信息列表

        total: 0, // 活动报名总记录数

        title:"",
        //查询活动规则检查
        queryRules:
          {
            // name:
            //   [
            //     {required: true, message:"讲师名称不能为空",trigger:"blur"},
            //     { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
            //   ],
            // level:
            //   [
            //     {required: true, message:"不能为空",trigger:"change"}
            //   ]
          },

        //活动修改表单
        updateForm:{
          id:"",
          hasChecked: "",
          nickname: "",
          phone: "",
          recomDate: "",
          recomDetail: "",
          referralMobile: "",
          referralName: "",
          referralSex: "",
          sex: "",
        },
        updateVisible:false,
        updateActRules:{},
        //选择哪一行活动列表
        multipleSelection: [],

        //活动列表
        actPublishList:[],

        //活动publishAct的查询参数
        publishActQuery:
          {
            activityTitle:"",
            activityTime:"",
            activityPlace:""
          },

        //点击新增 再点击选择活动 弹出的活动标题对话框可见性
        queryPublishActVisible: false,
        actPublishListTotal:0 // 活动总记录数
      }
    },
    created()
    {
      this.getRecommendListPage();

    },
    methods:
      {
        //取消修改活动
        updateRecommendCancel()
        {
          this.updateVisible = false;
          //点击取消需要赋updateForm.status默认值，不然第二次修改无法切换
          this.updateForm =  {
            id:"",
            hasChecked: "",
            nickname: "",
            phone: "",
            recomDate: "",
            recomDetail: "",
            referralMobile: "",
            referralName: "",
            referralSex: "",
            sex: "",
          };
          this.editPublishAct = false;
          this.editUserCard = false;
        },

        //打开修改活动对话框
        updateRecommend(row)
        {
          this.updateVisible = true;
          this.updateForm.id = row.id;
          this.updateForm.nickname = row.nickname;
          this.updateForm.phone = row.phone;
          this.updateForm.sex = row.sex;
          this.updateForm.referralSex = row.referralSex;
          this.updateForm.referralName = row.referralName;
          this.updateForm.referralMobile = row.referralMobile;
          this.updateForm.recomDetail = row.recomDetail;
          this.updateForm.recomDate = row.recomDate;
          this.updateForm.hasChecked =  row.hasChecked==0?"未审核":"已审核";
        },

        //推荐信息修改
        submitAddRecommend()
        {
          if(this.updateVisible)
          {
            this.$refs['updateForm'].validate((valid) =>
            {
              if(valid)
              {
                this.updateForm.hasChecked = this.updateForm.hasChecked==="未审核"? 0 : 1;
                recommend.updateRecommend(this.updateForm).then((response)=>
                {
                  if(response.code == 200)
                  {
                    this.$message.success(response.message);
                    this.updateRecommendCancel();
                    this.getRecommendListPage();
                  }else
                  {
                    this.$message.error(response.message);
                  }
                })
              }
              else
              {
                return false;
              }
            })
          }
        },
        //选中活动的一行时的事件
        handleSelectionChange(val)
        {
          this.multipleSelection = val;
        },
        //导出
        handleDownload()
        {
          if(this.multipleSelection.length ===0)
          {
            this.$message.warning("请勾选要导出的推荐数据行!");
            return;
          }
          this.$message.success("将导出已勾选的推荐数据信息");
          let that = this;
          let list = [];
          this.multipleSelection.forEach((item)=>
          {
            item.hasChecked = item.hasChecked==="0"?"未审核":"审核通过";
            list.push(item);
          })
          setTimeout(()=>
          {
            that.downloadLoading = true
            import('@/vendor/Export2Excel').then(excel =>
            {
              const tHeader = ['推荐人姓名','推荐人电话','被推荐人姓名','被推荐人电话','推荐详情','是否审核通过'];//导出的excel表
              const filterVal = ['nickname', 'phone', 'referralName', 'referralMobile','recomDetail','hasChecked'];//table属性
              const data = this.formatJson(filterVal, list);
              excel.export_json_to_excel({
                header: tHeader,
                data,
                filename: this.filename,
                autoWidth: this.autoWidth,
                bookType: this.bookType
              })
              that.downloadLoading = false
            })
          },1200);
          this.multipleSelection = [];
          //清除选中的活动
          this.$refs.multipleRecommendTable.clearSelection();
        },
        formatJson(filterVal, jsonData)
        {
          return jsonData.map(v => filterVal.map(j => {
            if (j === 'timestamp') {
              return parseTime(v[j])
            } else {
              return v[j]
            }
          }))
        },
        //重置推荐信息查询条件
        resetActPublishQuery()
        {
          this.recommendQuery = {};
          this.getRecommendListPage();
        },

        /*query展开和收起*/
        toggleAdvanced()
        {
          this.advanced = !this.advanced;
        },
        //获取活动分页列表，在选择下一页或者上一页时，分页器会传入当前页的值，所以需要this.queryParams.currentPage = currentPage
        getRecommendListPage(currentPage = 1)
        {
          this.queryParams.currentPage = currentPage;
          this.isLoading = true;
          recommend.pageRecommendCondition(this.queryParams.currentPage,this.queryParams.limit,this.recommendQuery)
            .then(response=>
            {
              if(response.code === 200)
              {
                this.recommendList = response.data.rows;
                this.total = response.data.total;
                this.isLoading = false;
              }
            }).catch(error => {
            this.isLoading = false;
            console.log(error);})
        },

        //查询
        submitQuery()
        {
          if(this.advanced === false)
          {
            this.advanced = true;
          }
          this.getRecommendListPage();
        },
        //清空查询条件
        resetQuery()
        {
          this.queryParams = {
            currentPage:1,
            limit:10,
          };
          this.recommendQuery= {
            hasChecked: "",
            nickname: "",
            phone: "",
            recomDate: "",
            recomDetail: "",
            referralMobile: "",
            referralName: "",
            referralSex: "",
            sex: "",
          };
          this.getRecommendListPage();
        },

        //根据活动id删除活动
        removeRecommendById(row)
        {
          let that = this;
          const recommendId = row.id;
          that.$confirm('是否确认删除该推荐的数据项?').then(function ()
          {
            recommend.delRecommendById(recommendId).then((response)=>
            {
              if(response.code === 200)
              {
                that.$message({
                  message: '删除成功!',
                  type: 'success'
                });
              }
              that.getRecommendListPage();

            }).catch(error=> {
              console.log(error)
            })
          })
        },
        //根据推荐id审核活动
        checkedById(row)
        {
          let that = this;
          const recommendId = row.id;
          const  recommendHasChecked = row.hasChecked == 0 ? 1 : 0;
          let tips = '是否审核通过该推荐数据项?';
          let tips1 = '审核成功';
          if(!recommendHasChecked){
            tips = "是否退回审核该推荐数据项?";
            tips1 = '退回成功';
          }
          that.$confirm(tips).then(function ()
          {
            recommend.checkRecommendById(recommendId,recommendHasChecked).then((response)=>
            {
              if(response.code === 200)
              {
                that.getRecommendListPage();
                that.$message({
                  message: tips1,
                  type: 'success'
                });
              }
              that.getRecommendListPage();
            }).catch(error=> {
              console.log(error)
            })
          })
        },

      },

  }
</script>

<style>
  .table-page-search-submitButtons
  {
    height: 50px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

</style>

